<template>
  <div class="login-box">
    <el-form    
      :model="data"
      style="max-width: 460px"
      :rules="rules"
      ref="ruleFormRef"
    >
    <div style="margin: 20px" />
      <el-form-item label="" prop="username">
        <el-input  :prefix-icon="User" v-model="data.username"  placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="" prop="userpass">
        <el-input  :prefix-icon="Lock"  v-model="data.userpass" placeholder="请输入密码" type="password" />
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import {reactive, ref} from 'vue'
import type {Ref} from 'vue';
import type { FormInstance, } from "element-plus";
import  { ElMessage } from "element-plus";
import {User, Lock} from '@element-plus/icons-vue';
import {loginCheckApi} from "@/api/admin"

// 双向绑定表单元素的数据
interface IData {
    username: string,
    userpass: string
}
const data = reactive<IData>({
    username: "admin",
    userpass: "123456"
})




const rules = reactive({
  username: [{ required: true, trigger: 'blur', message:"请输入用户名" }],
  userpass: [{ required: true, trigger: 'blur',  message:"请输入密码"}]

})

/* ForInstance 相当于内部定义了一个接口 */
const ruleFormRef = ref<FormInstance>()



let $router = useRouter();


/* function loginCheck() {
  $router.push("/admin");
} */

function onSubmit(formEl: FormInstance | undefined){
    
    console.log("ruleFormRef",ruleFormRef);
    if (!formEl) return
    formEl.validate((valid, fields)=>{
        if(valid){
            loginCheckApi({
                    adminname:data.username,
                    password:data.userpass
                })
            .then((res:any)=>{
                 console.log("res",res);                
                if(res.code === "200"){
                    ElMessage({
                        message:"登录成功！",
                        type:"success"
                    });
                    // console.log("token", res.data.data.token);
                    localStorage.setItem("username", res.data.adminname )
                    localStorage.setItem("token", res.data.token );
                    localStorage.setItem("menukeys", JSON.stringify(res.data.checkedkeys))
                    $router.push("/home");
                }else if (res.code === "10003"){
                    ElMessage({
                        message:"密码错误！",
                        type:"error"
                    });  
                }else if(res.code === "10005"){
                    ElMessage({
                        message:"该用户未注册",
                        type:"warning"
                    });
                }
                else {
                    ElMessage({
                        message:"未知错误！",
                        type:"error"
                    });
                }
            })
            .catch((err:any)=>{
                ElMessage({
                        message:"服务器错误！",
                        type:"error"
                    });
                    console.log("服务器错误", err);
                    
            })
        }else {
            // console.log("error submit!",fields);
            ElMessage({
                        message:"错误提交！",
                        type:"error"
                    });
            
        }
    })
    
}
</script>

<style scoped>

.login-box {
    width: 100%;
    height: 100%;
    background: url(https://cas.1000phone.net/cas/images/login/bg.png) 50% no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.el-form {
    width: 400px;
    height: 200px;
    padding: 20px;
    background-color: #fff;

}
.el-button{
    width: 460px;
}

</style>